<template>
  <div>
    <div class="register">
      <!-- <div class="registerItem4"> -->
        <!-- <span @click="returnAuthorization"> < </span> -->
        <!-- <el-button type="primary" icon="el-icon-arrow-left" circle @click="returnAuthorization"></el-button> -->
        <!-- <el-button class="AppletsRegisterButton" @click="register3">返回</el-button> -->
      <!-- </div> -->
      <div class="registerItem">
        <span class="AppletsRegisterImg"></span>
        <div style="
            color: #595961;
            font-size: 16px;
            font-weight: bold;
            margin: 20px 0 0 40px;
          ">
          微信注册小程序
        </div>
        <div style="color: #9797a1; font-size: 12px; margin: 20px 0 0 40px">
          前往微信公众平台注册小程序
        </div>
        <el-button class="AppletsRegisterButton" @click="register">立即注册</el-button>
      </div>
      <div class="registerItem2">
        <span class="AppletsRegisterImg"></span>
        <div style="
            color: #595961;
            font-size: 16px;
            font-weight: bold;
            margin: 20px 0 0 30px;
          ">
          【推荐】复用公众号注册小程序
        </div>
        <div style="
            color: #9797a1;
            font-size: 12px;
            margin: 20px 0 0 40px;
            width: 200px;
          ">
          1. 已有认证通过公众号，复用公众号资质申请小程序免300元认证费用。
        </div>
        <div style="
            color: #9797a1;
            font-size: 12px;
            margin: 10px 0 0 40px;
            width: 200px;
          ">
          2. 公众号管理员扫码确认复用公众号资质快速注册小程序。
        </div>
        <div style="
            color: #9797a1;
            font-size: 12px;
            margin: 10px 0 0 40px;
            width: 200px;
          ">
          3.
          管理员扫码验证通过后跳转至第三方平台页面，微信将注册结果返回给第三方平台。
        </div>
        <el-button class="AppletsRegisterButton" @click="register2" type="primary">立即注册</el-button>
      </div>
      <div class="registerItem3">
        <span class="AppletsRegisterImg"></span>
        <div style="
            color: #595961;
            font-size: 16px;
            font-weight: bold;
            margin: 20px 0 0 40px;
          ">
          快速注册企业小程序
        </div>
        <div style="color: #9797a1; font-size: 12px; margin: 20px 0 0 40px">
          1. 填写审核资料
        </div>
        <div style="color: #9797a1; font-size: 12px; margin: 10px 0 0 40px">
          2. 24小时内完成身份认证
        </div>
        <div style="color: #9797a1; font-size: 12px; margin: 10px 0 0 40px">
          3. 设置邮箱和密码
        </div>
        <el-button class="AppletsRegisterButton" @click="register3">立即注册</el-button>
      </div>

    </div>
  </div>
</template>
<script>
  import {
    appletGrant,
    Fastregisterauth
  } from "@/api/applet/authorization";
  export default {
    created() {
      var msg = location.search.split("?")[1];
      if (msg != null && msg != "") {
        let str =  msg.split("=")[0];
        // let status = msg.indexOf("=");
        // console.log("授权状态：",status);
        console.log("授权状态：",str);
        let statusMsg = location.search.split("=")[1];

        let decode = decodeURIComponent(statusMsg);
        if ("success" == str) {
          this.authorizationSuccess(decode);
        } else {
          this.authorizationError(decode);
        }
      }
    },
    methods: {
      authorizationSuccess(decode) {
        this.$confirm('已成功绑定公众号,是否复用公众号注册小程序', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal:false,
          type: 'warning'
        }).then(() => {
          console.log(decode);
          let indexUrl = process.env.VUE_APP_BASE + "/store/applet/authorization";
          // let authorizationType = "allwork";
          let authorizationInfo = decode;
          Fastregisterauth(indexUrl, authorizationInfo).then((response) => {
            let url = response.data.AuthorizationUrl;
            window.location.href = url;
          });
        }).catch(() => {
          this.$router.push("/register/data");
        })
      },
      authorizationError(decode) {
        this.$message({
          message: decode,
          type: "warning",
        });
      },
      returnAuthorization(){
         this.$router.push("/store/applet/authorization");
      },
      register() {
        window.open("https://mp.weixin.qq.com/");
      },
      register2() {
        this.$confirm('请先授权公众号信息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let indexUrl = process.env.VUE_APP_BASE + "/register/data";
          let authorizationType = "allwork";
          let authorizationStatus = "1";
          console.log("授权公众号")
          appletGrant(indexUrl, authorizationType,authorizationStatus).then((response) => {
            let url = response.data.grantUrl;
            window.location.href = url;
          });
        }).catch(() => {
          console.log("取消授权公众号")
        });
      },
      register3() {
        this.$router.push("/fastRegister/data/");
      },
    },
  };
</script>

<style lang="scss" scoped>
  .register {
    // background: #fff;
    width: 1000px;
    height: auto;
    margin: 80px auto 0;
    display: flex;
    justify-content: space-between;
    //   display: flex;
    .registerItem {
      width: 280px;
      height: 400px;
      background-color: #fff;
      display: inline-block;
      // margin-top: 50px;
      border-radius: 10px;
      border: 1px solid #eee;
      position: relative;

      .AppletsRegisterImg {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-image: url("../../../assets/images/registerApplet.png");
        background-size: 100% 100%;
        margin: 30px 0 0 40px;
      }

      .AppletsRegisterButton {
        position: absolute;
        bottom: 40px;
        left: 35px;
        width: 210px;
        height: 40px;
      }
    }

    .registerItem2 {
      width: 280px;
      height: 400px;
      background-color: #fff;
      display: inline-block;
      border-radius: 10px;
      position: relative;
      border: 1px solid #eee;

      .AppletsRegisterImg {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-image: url("../../../assets/images/registerApplet.png");
        background-size: 100% 100%;
        margin: 30px 0 0 40px;
      }

      .AppletsRegisterButton {
        position: absolute;
        bottom: 40px;
        left: 35px;
        width: 210px;
        height: 40px;
      }
    }

    .registerItem3 {
      width: 280px;
      height: 400px;
      background-color: #fff;
      display: inline-block;
      border-radius: 10px;
      position: relative;
      border: 1px solid #eee;

      .AppletsRegisterImg {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-image: url("../../../assets/images/registerApplet.png");
        background-size: 100% 100%;
        margin: 30px 0 0 40px;
      }

      .AppletsRegisterButton {
        position: absolute;
        bottom: 40px;
        left: 35px;
        width: 210px;
        height: 40px;
      }
    }
    .registerItem4 {
      float: left;
    }
  }
</style>
